/*
* @Date: 2021/1/17
* @Author: XueChengwu <xuechengwu@erayt.com>
* @Copyright: 2015-2019 Erayt, Inc.
* @Description: If you have some questions, please contact: xuechengwu@erayt.com.
*/
import React from 'react';
import { Input } from 'antd';
import './index.scss';
import Icon from 'components/Icon';
import Source from '../Source';
import VerticalDivider from 'components/VerticalDivider';
export default class extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      width: 1024,
      height: 769,
    }
  }
  render() {
    const { width, height } = this.state;
    return (
      <div className="viewer-box">
        <div className="viewer-box-toolbar">
          <div className="window-width">
            <Input value={width} onChange={(e) => this.setState({ width: Number(e.currentTarget.value)})} />
          </div>
          ×
          <div className="window-height">
            <Input value={height} onChange={(e) => this.setState({ height: Number(e.currentTarget.value)})} />
          </div>
          <Icon type="T" onClick={this.props.onViewSource} />
        </div>
        <div className="viewer-workspace">
          <Source data={this.props.dataSource}/>
          <VerticalDivider style={{width: 3, background: '#454545'}} />
          <div className="viewer-box-designer-panel">

            <div id="viewer-box-designer-window" className="viewer-box-designer-window sortable" style={{ width: width, height: height, left: width * -0.2, right: width * -0.2, top: height * -0.2 + 30 }}>

            </div>
          </div>
        </div>

      </div>
    )
  }
}
